<template>
  <!-- 分页 -->
  <van-pagination
    :value="page"
    :page-count="total"
    force-ellipses
    @change="hanlePageChange"
  />
</template>

<script>
export default {
  props: {
    // 页码
    page: {
      type: Number,
      default: 1,
      required: true
    },
    // 数据总量
    total: {
      type: Number,
      default: 0,
      required: true
    },
    // 每页数据数
    size: {
      type: Number,
      default: 10
    },
    // 获取数据函数
    handler: {
      type: String,
      default: 'getTable'
    },
    // 布局
    layout: {
      type: String,
      default: 'prev, pager, next, jumper'
    }
  },
  methods: {
    hanlePageChange (page) {
      this.$emit('update:page', page);
      this.handleFetch();
    },
    handleSizeChange (size) {
      this.$emit('update:size', size);
      this.handleFetch();
    },
    handleFetch () {
      const handler = _.get(this.$parent, this.handler);
      if (!_.isUndefined(handler) && _.isFunction(handler)) {
        handler();
      } else {
        this.$message('分页操作函数有误');
      }
    }
  }
};
</script>
